<template>
  <div class="mobility">
    <el-container>
      <el-main>
        <div class="div1">
          <span class="div1-title"> {{$t('broker.RulesForPartners')}}：</span>
          <div class="div1-data">
            <span>{{$t('broker.plc')}}</span
            >
            <a href="#">{{$t('broker.clickHere')}}>></a>
          </div>
        </div>
        <!-- 
    "MyPartnersPage":"我的经纪商页面",
    
    "ApplyToBeAPartner":"申请成为经纪商",
    "Burns":"燃烧57,600个eDRF即可获得经纪商交易资格",
    "Burn":"燃烧",
    "AccountBalance":"当前余额",
    "ValidPeriodRemain":"剩余有效期",
    "UnitPrice":"单价",
    "DepositAmount":"充值金额",
    "ValidPeriod":"有效期",


    "TraderAddress":"交易者地址",
    "Operate":"操作",
    "OpenPosition":"开仓",
    "ClosePosition":"平仓",
    "MandatoryLiquidation":"强制平仓",
    "AutoDeleveraging":"自动减仓",
    "TradingFeeEarning":"手续费收入",
    "TradingDate":"交易时间",
    "TraderInformation":"交易者信息",
    "RegistrationDate":"注册时间" -->
        <div class="div2">
          <div class="div2Item">
            <span class="span1">{{$t('broker.DailyEarning')}}（USDT）</span>
            <span class="span2">123,456.00</span>
            <span class="span3">{{$t('broker.AccumulatedAccountBalanceHistory')}}（USDT）987,654,321.00</span>
          </div>
          <div class="div2Item"> 
            <span class="span1">{{$t('broker.AccountBalance')}}（USDT）</span>
            <span class="span2">5,678.00</span>
            <div class="spanDiv" @click="isRedeem(2)"> 
              <span>{{$t('broker.Withdraw')}}</span>
            </div>
          </div>
          <div class="div2Item">
            <span class="span1">{{$t('broker.ValidPeriodForPrivilege')}}</span>
            <div class="day_div">
              <span class="day_span">365 <span>{{$t('broker.Days')}}</span> </span>
              <span class="dayTime">{{$t('broker.Until')}}2048-12-31</span>
            </div>
            <div class="spanDiv" @click="CZdialogVisible = true">
              <span>{{$t('broker.Deposit')}}</span> 
            </div>
          </div>
        </div>
        <p class="hisP">{{$t('broker.HistoryEarning')}}</p>
        <div class="tableDiv">
          <template>
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              :header-cell-style="{
                background: '#212432',
                color: '#505363',
                border: '0px solid #2f3241'
              }"
              :cell-style="{
                background: '#2f3241',
                border: '0px '
              }"
            >
              <el-table-column prop="date" :label="$t('broker.TraderAddress')"> </el-table-column>
              <el-table-column prop="name" :label="$t('broker.Operate')"></el-table-column>
              <el-table-column prop="address" :label="$t('broker.TradingFeeEarning')+'（USDT）'"> </el-table-column>
              <el-table-column prop="address" :label="$t('broker.TradingDate')"> </el-table-column>
            </el-table>
          </template>
        </div>
      </el-main>
      <el-footer>
        <el-pagination background layout="prev, pager, next" :total="100">
        </el-pagination>
      </el-footer>
    </el-container>
    <el-dialog
      :title="$t('broker.Withdraw')"
      modal
      :lock-scroll="false"
      :visible.sync="dialogVisible"
      class="blacks-dialog mediums-dialog deposit-withdraw-dialog"
      width="30%">
      <div>
        <div class="divOne">
          <span class="numbDRY">{{$t('broker.Amount')}}</span>
           <input type="number" class="input borderless" v-model="num" placeholder="请输入数量!">
          <span class="NamebDRY">USDT</span>
        </div>
        <div class="divTwo">
          <span class="spaOne">{{$t('broker.MaximumAmountTobeWithdrew')}}456.00</span>
          <span class="spaTwo">{{$t('broker.All')}}</span>
        </div>
        <div class="divThree">{{$t('broker.Withdraw')}}</div>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('broker.Deposit')"
      modal
      :lock-scroll="false"
      :visible.sync="CZdialogVisible"
      class="blacks-dialog mediums-dialog deposit-withdraw-dialog"
      width="30%"
    >
      <div>
        <div class="CZdivOne">
          <div>
            <span class="span1">456.00</span>
            <span class="span2">{{$t('broker.AccountBalance')}}(eDRY）</span>
          </div>
          <div>
            <span class="span1">456.00</span> 
            <span class="span2">{{$t('broker.ValidPeriodRemain')}}({{$t('broker.Days')}}）</span>
          </div>
          <div>
            <span class="span1">456.00</span>
            <span class="span2">{{$t('broker.UnitPrice')}}(eDRY/{{$t('broker.Days')}})</span>
          </div>
        </div>
        <div class="divOne">
          <span class="numbDRY">{{$t('broker.Amount')}}</span>
          <input
            type="number"
            class="input borderless"
            v-model="num"
            placeholder="请输入数量!"
          />
          <span class="NamebDRY">eDRY</span>
        </div>
        <div class="dayDiv">
          <span class="valSpan">{{$t('broker.ValidPeriod')}} </span>
          <span class="daySpan">240{{$t('broker.Days')}}</span>
        </div>
        <div class="divThree">{{$t('broker.Deposit')}}</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      CZdialogVisible: false,
      num:0,
      titleName:"",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        }
      ]
    };
  },
  methods: {
    isRedeem(a){
      if(a==1){
        this.titleName = "质押"
      }else if(a==2){
         this.titleName = "$t('broker.Withdraw')"
      }else{
        this.titleName = "提取"
      }
      this.dialogVisible = true
    }
  },
};
</script>
<style lang="scss" scoped>
.mobility {
  width: 1366px;
  margin: 20px auto;
}
.el-table::before,
.el-table--group::after,
.el-table--border::after {
  content: "";
  position: absolute;
  background-color: #2f3241 !important;
}
.el-main {
  height: 912px;
  background: #13141f;
  // background: #3644d8;
  overflow: hidden;
  .div1 {
    margin-bottom: 30px;
    .div1-title {
      font-size: 16px;
      font-family: PingFangSC-Semibold;
      line-height: 25px;
      color: #e2e4ee;
      opacity: 1;
    }
    .div1-data {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 20px;
      color: #747788;
      margin-top: 10px;
      opacity: 1;
      a {
        color: #fae248;
      }
    }
  }
  .div2 {
    height: 170px;
    width: 100%;
    margin-bottom: 28px;
    display: flex;
    .div2Item {
      width: 430px;
      height: 160px;
      background: #282b3b;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      margin: 10px;
      .span1 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 22px;
        color: #b0b7d6;
        opacity: 1;
      }
      .span2 {
        font-size: 32px;
        font-family: DINbek Bold;
        font-weight: bold;
        line-height: 44px;
        color: #ffffff;
      }
      .span3 {
        font-size: 13px;
        font-family: PingFang HK;
        font-weight: 400;
        line-height: 20px;
        color: #b0b7d6;
        opacity: 1;
        text-align: center;
      }
      .day_div{
        text-align: center;
        .day_span{
          font-size: 32px;
          font-family: DINbek Bold;
          font-weight: bold;
          line-height: 44px;
          color: #ffffff;
          display: block;
          span{
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 22px;
            color: #b0b7d6;
            opacity: 1;
          }
        }
        .dayTime{
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 20px;
          color: #747788;
          opacity: 1;
        }
      }
      .spanDiv {
        width: 100px;
        height: 30px;
        background: #454233;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        span {
          color: #fae248;
        }
      }
    }
  }
  .hisP {
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    line-height: 25px;
    color: #e2e4ee;
  }
  .tableDiv {
    height: 545px;
    background: #2f3241;
  }
}
.el-footer {
  height: 43px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.divOne{
  background: #1b1d2b;
  padding: 5px 10px;
  display: flex;
  margin: 20px 0 10px;
  height: 44px;
  line-height: 44px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  input{
    background: #1b1d2b;
    border: 0;
    color: #fff;
    width: 70%;
    font-size: 14px;
  }
  .numbDRY , .NamebDRY{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #B0B7D6;
    opacity: 1;
  }
  // input:focus {//获取焦点
  //       outline: 0px solid #1b1d2b;//边框不用border，用outline
  //       background: #1b1d2b;//背景色
  //       color: #fff;
  //     }
}
.divTwo{
  display: flex;
  justify-content: space-between;
  margin-bottom: 86px;
  .spaOne{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #B0B7D6;
    opacity: 1;
  }
  .spaTwo{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FAE248;
    opacity: 1;
  }
}
.divThree{
  height: 40px;
  background: #524F3D;
  border-radius: 4px;
  line-height:40px;
  text-align: center;
  font-size: 14px;
  color: #FAE248;
  opacity: 1;
}
.CZdivOne {
  display: flex;
  justify-content: space-between;
  margin: 15px 0 30px;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .span1 {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #fae248;
      opacity: 1;
    }
    .span2 {
      font-size: 12px;
      font-weight: 400;
      color: #747788;
    }
  }
}
.dayDiv {
  margin-bottom: 30px;
  .valSpan {
    font-size: 12px;
    font-weight: 400;
    color: #747788;
  }
  .daySpan {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #fae248;
    opacity: 1;
  }
}
</style>

